﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/index.css">
		<script src="js/plugins/js-cookie/js.cookie.min.js"></script>
		<script src="js/vue/vue.min.js"></script>
		<script src="js/common.js"></script>
	</head>
<body>
<div id="app" v-cloak>
<div class="dvhead">
	<div class="dvlogo"><a href="index.html">你问我答</a></div>
	<div class="dvsearch">10秒钟<a href="register.html">注册</a>账号，找到你的同学</div>
	<div class="dvreg" v-if="user != null">
		<img class="userface" :src="user.avatar"  style="border-radius: 50%; overflow: hidden; margin-top: 15px;background-color: white;">
	</div>
	<div class="dvreg" v-if="user == null">
		已有账号，立即&nbsp;<a href="login.html">登录</a>
	</div>
</div>
<div class="dvContent">
	<div class="dvquesleft">

		<div class="dvqstitle">
			<img class="imgbean" src="images/bean.jpg">
				<span class="qsTitle">问答</span>

		</div>
		<div class="dvtabhead">
			<div class="tabheads tabcurrent">全部问题</div>
			<div class="tabheads">我的问题</div>
			<div class="tabheads">关注问题</div>
			<div class="tabheads">问题标签</div>
		</div>
		<div class="tabContent">
			<div class="dvtags">
				<!--  -->
				<a href="javascript:;" class="curenttag" @click="addParams(1, $event)">待解决</a>
				<span class="line"></span>
				<a href="javascript:;" @click="addParams(2, $event)">已解决</a>

				<span class="line" ></span>
				<a href="javascript:;" @click="addParams(3, $event)">高分</a>
				<span class="line"></span>
				<a href="javascript:;" @click="addParams(4, $event)">新问题</a>

			</div>
			<div class="tab">
				<div  v-for="q in page.records"    class="dvques">
					<div class="quesCount">
						<div class="count">{{q.replynum}}</div>
						<div class="ques">回答数</div>
						<div align="left" style="margin: 11px">
							<a href="#">回答</a>
						</div>
					</div>
					<div class="quesContent">
						<div class="quesTitle">
							{{q.score}}
							<img src="images/bean.jpg" class="bean"> <span class="spanques">{{q.title | textLengthFormat}}</span>
						</div>

						<div class="qContent" v-html="q.content"
							 style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;
							 -webkit-line-clamp: 2;-webkit-box-orient: vertical; width: 100%" >

						</div>

						<div class="tags">
							<span class="tag">excel</span><span class="tag">程序</span>
						</div>
						<div class="quesUser">
							<img :src="q.ask.avatar" class="imguser" />
							<div class="userName">
								{{q.ask.username}}
								<div class="liulan">浏览({{q.viewnum}}) 30分钟前</div>
							</div>

						</div>
					</div>
				</div >
				<span class="back">
					<a href="javascript:;" @click="doPage(page.current-1)">上一页</a> &nbsp;&nbsp;
					<a href="javascript:;" @click="doPage(page.current+1)">下一页</a>
				</span>
			</div>
			<div class="tab hidden">未完待续</div>
			<div class="tab hidden">未完待续</div>
			<div class="tab hidden">未完待续</div>
		</div>
	</div>
	<div class="dvquesright">
		<div>
			<buton class="btnques" onclick="location.href='add.html'">提个问题</buton>
		</div>
		<div class="dvorder">
			<div class="orderTitle">专家排行榜</div>
			<div class="users" v-for="u in rank">
				<img class="userface" :src="u.avatar" />
				<div class="dvuser">
					<div class="userTitle">{{u.username}}</div>
					<div class="userdeital">大牛{{u.level}}级 积分:{{u.score}}</div>
				</div>
			</div>
		</div>
	</div>
</div>
</div>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights" id="links20210126">
	Collect from yezi
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(".tabheads").click(function(){
			$(".tabheads").removeClass("tabcurrent").eq($(this).index()).addClass("tabcurrent");
			$(".tab").hide().eq($(this).index()).show();
		});
	});


	var vue = new Vue({
		el:"#app",
		data:{
			user:getUserInfo(),
			rank:[],
			page:{},
			qo:{}
		},
		filters:{
			textLengthFormat:function (value) {
				if(value.length > 10){
					return value.substring(0, 10) + "..."
				}
				return  value;
			}
		},
		methods:{
			addParams:function(value, event){
				$(".dvtags a").removeClass("curenttag");
				$(event.target).addClass("curenttag")

				this.qo = {}

				if(value == 1){
					this.qo.status = 0
				}else if (value == 2){
					this.qo.status = 1
				}else if(value == 3){
					this.qo.orderBy = "score"
				}else if(value == 4){
					this.qo.orderBy = "create_time"
				}
				this.doPage(1);
			},
			doPage:function (currentPage) {
				if(currentPage <= 1){
					currentPage = 1;
				}else if(currentPage >= this.page.pages){
					currentPage = this.page.pages;
				}
				this.qo.currentPage = currentPage;

				$.get("/questions/query", this.qo, function (data) {
					console.log(data);
					if(data.code == 200){
						vue.page = data.data;
					}
				})
			}
		},
		mounted:function () {
			var _this = this;
			//排行
			$.get("/users/rank", function (data) {
				if(data.code == 200){
					_this.rank = data.data;
				}
			})

			//问答
			$.get("/questions/query", {}, function (data) {
				if(data.code == 200){
					_this.page = data.data;
				}
			})

		}
	})
</script>
</body>
</html>

